<template>
  <uni-transition :show="showInstructions" mode-class="fade">
    <div class="instructions-panel" :class="{ open: showInstructions }">
      <slot></slot>
    </div>
  </uni-transition>
</template>



<script setup>
import { ref, watch } from 'vue';
import { defineProps } from 'vue';

const props = defineProps({
  showInstructions: Boolean,
})


watch(() => props.showInstructions, (newVal) => {
  console.log('saw ',props.showInstructions)
});
</script>

<style scoped>
.instructions-panel {
  margin-top: 10px;
  padding: 10px;
  overflow: auto;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

.instructions-panel.open {

}

.fade-enter-active, .fade-leave-active {
  transition: max-height 0.3s ease-in-out;
}

.fade-enter, .fade-leave-to {
  max-height: 0;
}

.fade-enter-to, .fade-leave {
  //min-height: 500px; /* 根据实际内容调整高度 */
}
</style>
